<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的活动 - 校园活动报名平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/custom-icons.css" rel="stylesheet">
    <style>
        .container {
            max-width: 960px;
        }
        .header {
            padding: 2rem 0;
            text-align: center;
        }
        .card {
            margin-bottom: 1.5rem;
        }
        .footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
            color: #777;
            border-top: 1px solid #e5e5e5;
            text-align: center;
        }
        .nav-item {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>校园活动报名平台</h1>
            <p class="lead">管理我的活动</p>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">活动平台</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="activities.html">活动列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="create-activity.html">创建活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="my-activities.html">我的活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="profile.html">个人信息</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="logoutBtn">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="row mb-4">
            <div class="col-md-12">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="created-tab" data-bs-toggle="tab" data-bs-target="#created" type="button" role="tab" aria-controls="created" aria-selected="true">我创建的活动</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="registered-tab" data-bs-toggle="tab" data-bs-target="#registered" type="button" role="tab" aria-controls="registered" aria-selected="false">我报名的活动</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="created" role="tabpanel" aria-labelledby="created-tab">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">我创建的活动</h5>
                                <div id="myCreatedActivities" class="row"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="registered" role="tabpanel" aria-labelledby="registered-tab">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">我报名的活动</h5>
                                <div id="myRegisteredActivities" class="row"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>© 2025 校园活动报名平台</p>
        </footer>
    </div>

    <!-- 活动详情模态框 -->
    <div class="modal fade" id="activityDetailModal" tabindex="-1" aria-labelledby="activityDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="activityDetailModalLabel">活动详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="activityDetailContent">
                    <!-- 活动详情内容将在这里动态加载 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger" id="cancelRegistrationBtn" style="display: none;">取消报名</button>
                    <button type="button" class="btn btn-warning" id="editActivityBtn" style="display: none;">编辑活动</button>
                    <button type="button" class="btn btn-danger" id="deleteActivityBtn" style="display: none;">删除活动</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let currentUser = null;
        let currentActivity = null;
        let currentTab = 'created'; // 当前标签页：created 或 registered
        const API_BASE_URL = '/api';

        // 页面加载完成后执行
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();

            // 退出登录按钮点击事件
            $('#logoutBtn').on('click', function() {
                logout();
            });

            // 标签页切换事件
            $('#myTab button').on('click', function (e) {
                currentTab = $(e.target).attr('id').split('-')[0];
            });

            // 取消报名按钮点击事件
            $('#cancelRegistrationBtn').on('click', function() {
                cancelRegistration(currentActivity.id, currentUser.id);
            });

            // 编辑活动按钮点击事件
            $('#editActivityBtn').on('click', function() {
                // 保存当前活动ID到本地存储，用于编辑页面获取
                localStorage.setItem('editActivityId', currentActivity.id);
                window.location.href = 'edit-activity.html';
            });

            // 删除活动按钮点击事件
            $('#deleteActivityBtn').on('click', function() {
                deleteActivity(currentActivity.id);
            });
        });

        // 检查登录状态
        function checkLoginStatus() {
            const user = localStorage.getItem('currentUser');
            if (user) {
                currentUser = JSON.parse(user);
                loadMyCreatedActivities();
                loadMyRegisteredActivities();
            } else {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }

        // 加载我创建的活动
        function loadMyCreatedActivities() {
            $.ajax({
                url: API_BASE_URL + '/activities/creator/' + currentUser.id,
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        displayActivities(response.data, '#myCreatedActivities', 'created');
                    } else {
                        alert('获取我创建的活动失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取我创建的活动失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 加载我报名的活动
        function loadMyRegisteredActivities() {
            $.ajax({
                url: API_BASE_URL + '/activities/registered/' + currentUser.id,
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        displayActivities(response.data, '#myRegisteredActivities', 'registered');
                    } else {
                        alert('获取我报名的活动失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取我报名的活动失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 显示活动列表
        function displayActivities(activities, containerId, type) {
            const container = $(containerId);
            container.empty();

            if (activities.length === 0) {
                container.html('<p class="text-center">暂无活动</p>');
                return;
            }

            activities.forEach(function(activity) {
                const startTime = new Date(activity.startTime).toLocaleString();
                const endTime = new Date(activity.endTime).toLocaleString();
                const deadline = new Date(activity.registrationDeadline).toLocaleString();
                
                const card = `
                    <div class="col-md-6 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">${activity.title}</h5>
                                <p class="card-text">${activity.description.substring(0, 100)}${activity.description.length > 100 ? '...' : ''}</p>
                                <p><strong>地点：</strong>${activity.location}</p>
                                <p><strong>时间：</strong>${startTime} - ${endTime}</p>
                                <p><strong>人数：</strong>${activity.currentParticipants}/${activity.maxParticipants || '不限'}</p>
                                <button class="btn btn-info view-detail-btn" data-id="${activity.id}" data-type="${type}">查看详情</button>
                            </div>
                        </div>
                    </div>
                `;
                container.append(card);
            });

            // 绑定查看详情按钮事件
            $('.view-detail-btn').on('click', function() {
                const activityId = $(this).data('id');
                const type = $(this).data('type');
                viewActivityDetail(activityId, type);
            });
        }

        // 查看活动详情
        function viewActivityDetail(activityId, type) {
            $.ajax({
                url: API_BASE_URL + '/activities/' + activityId,
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        currentActivity = response.data;
                        displayActivityDetail(currentActivity, type);
                        
                        // 显示模态框
                        const modal = new bootstrap.Modal(document.getElementById('activityDetailModal'));
                        modal.show();
                    } else {
                        alert('获取活动详情失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取活动详情失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 显示活动详情
        function displayActivityDetail(activity, type) {
            const startTime = new Date(activity.startTime).toLocaleString();
            const endTime = new Date(activity.endTime).toLocaleString();
            const deadline = new Date(activity.registrationDeadline).toLocaleString();
            
            const content = `
                <h4>${activity.title}</h4>
                <p class="text-muted">创建者：${activity.creatorName}</p>
                <hr>
                <p>${activity.description}</p>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>活动地点：</strong>${activity.location}</p>
                        <p><strong>开始时间：</strong>${startTime}</p>
                        <p><strong>结束时间：</strong>${endTime}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>报名截止：</strong>${deadline}</p>
                        <p><strong>参与人数：</strong>${activity.currentParticipants}/${activity.maxParticipants || '不限'}</p>
                        <p><strong>活动状态：</strong>${activity.isActive ? '正在进行' : '已结束'}</p>
                    </div>
                </div>
            `;
            
            $('#activityDetailContent').html(content);
            $('#activityDetailModalLabel').text(activity.title);
            
            // 根据类型显示不同的按钮
            if (type === 'registered') {
                $('#cancelRegistrationBtn').show();
                $('#editActivityBtn').hide();
                $('#deleteActivityBtn').hide();
            } else if (type === 'created') {
                $('#cancelRegistrationBtn').hide();
                $('#editActivityBtn').show();
                $('#deleteActivityBtn').show();
            }
        }

        // 取消报名
        function cancelRegistration(activityId, userId) {
            if (confirm('确定要取消报名吗？')) {
                $.ajax({
                    url: API_BASE_URL + '/activities/' + activityId + '/register/' + userId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.code === 200) {
                            alert('取消报名成功');
                            // 关闭模态框
                            $('#activityDetailModal').modal('hide');
                            // 重新加载活动列表
                            loadMyRegisteredActivities();
                        } else {
                            alert('取消报名失败：' + response.message);
                        }
                    },
                    error: function(xhr) {
                        alert('取消报名失败：' + (xhr.responseJSON?.message || '服务器错误'));
                    }
                });
            }
        }

        // 删除活动
        function deleteActivity(activityId) {
            if (confirm('确定要删除该活动吗？此操作不可恢复！')) {
                $.ajax({
                    url: API_BASE_URL + '/activities/' + activityId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.code === 200) {
                            alert('活动删除成功');
                            // 关闭模态框
                            $('#activityDetailModal').modal('hide');
                            // 重新加载活动列表
                            loadMyCreatedActivities();
                        } else {
                            alert('活动删除失败：' + response.message);
                        }
                    },
                    error: function(xhr) {
                        alert('活动删除失败：' + (xhr.responseJSON?.message || '服务器错误'));
                    }
                });
            }
        }
    </script>
</body>
</html> 